﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>dESiGNERz-CREW.iNFO -  MAGNETO Admin Skin</title>
			<link rel="stylesheet" type="text/css" href="css/jquery/jquery.ui.all.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/tables/table_data.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/style.css" title="style_blue" media="screen"/>
			<link rel="alternate stylesheet" type="text/css" href="css/style_green.css" title="style_green" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_red.css" title="style_red" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_purple.css" title="style_purple" media="screen" />
			
			<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
			<script type="text/javascript" SRC="js/jquery-1.4.2.js"></script>
			<script type="text/javascript" SRC="js/jquery-ui-1.8.2.js"></script>
			<script type="text/javascript" SRC="js/jquery.validate.js" ></script>
			<script type="text/javascript" SRC="js/jquery.wysiwyg.js" ></script>
			<script type="text/javascript" SRC="js/jquery.dataTables.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.stack.js"></script>
			<script type="text/javascript" SRC="js/styleswitch.js"></script>
			<script type="text/javascript" SRC="js/custom.js"></script>
	</head>
  <body>
	<div id="wrapper">

      <ul id="topbar">
        <li><a class="button white fl" title="preview" HREF="index.html"><span class="icon_single preview"></span></a></li>
		<li class="s_1"></li>
        <li class="logo"><strong>MAGNETO</strong> ADMIN SKIN</li>
		<li class="s_1"></li>
        <li><a class="breadcrumb underline" href="#">Dashboard</a> &gt; <a class="breadcrumb underline" href="#"><strong>Forms</strong></a></li>
        <li class="fr"><a class="button red fl" title="logout" HREF="index.html"><span class="icon_text logout"></span>logout</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="unread mail" href="#"><span class="icon_text mail"></span>3</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="admin" href="#"><span class="icon_text admin"></span>admin</a></li>
		<li class="fr"><a id="logged">Logged in as</a></li>
      </ul>
	
      <ul id="navbar">
        <li class="active">
		<a HREF="dashboard.html"><span class="icon_text dashboard"></span>dashboard</a>
			<ul>
				<li><a class="subbutton white" HREF="general.html"><span class="icon_text general"></span>general</a></li>
				<li><a class="subbutton white" HREF="tabs.html"><span class="icon_text tab"></span>tabs</a></li>
				<li><a class="subbutton white" HREF="typography.html"><span class="icon_text typography"></span>typography</a></li>
				<li><a class="subbutton white" HREF="grids.html"><span class="icon_text grids"></span>grids</a></li>
				<li><a class="subbutton white" HREF="tables.html"><span class="icon_text tables"></span>tables</a></li>
				<li class="active"><a class="subbutton white" HREF="forms.html"><span class="icon_text forms"></span>forms</a></li>
				<li><a class="subbutton white" HREF="graphs.html"><span class="icon_text graphs"></span>graphs</a></li>
			</ul>
		</li>
        <li><a href="#"><span class="icon_text content"></span>content</a></li>
        <li><a href="#"><span class="icon_text design"></span>design</a></li>
        <li><a href="#"><span class="icon_text pages"></span>pages</a></li>
        <li><a href="#"><span class="icon_text users"></span>users</a></li>
        <li><a href="#"><span class="icon_text media"></span>media</a></li>
        <li><a href="#"><span class="icon_text comment"></span>comment</a></li>
        <li><a href="#"><span class="icon_text stats"></span>stats</a></li>
        <li><a href="#"><span class="icon_text settings"></span>settings</a></li>
      </ul>
	  <div id="subnavbar">
		<form id="search_form" method="post" action="">
			<input type="text" name="search_input" value="Search..." id="search_input" class="fl" />
		</form>
	  </div>
	
	<div id="content">
	
	<div class="column half fl">
		
		<div class="box">
		<h2 class="box-header">	form validation </h2>
		<div class="box-content">
		<form id="formtest" method="get" action="">
			<label class="form-label required"> first name </label>
			<input id="form-firstname" class="form-field width60" name="firstname" type="text" value="" maxlength="100"/>
			
			<label class="form-label"> last name </label>
			<input id="form-lastname" class="form-field width60" name="lastname" type="text" value="" maxlength="100"/>
			
			<label class="form-label"> username </label>
			<input id="form-username" class="form-field width60" name="username" type="text" value="" maxlength="100"/>
			
			<label class="form-label"> password </label>
			<input id="form-password" class="form-field width60" name="password" type="password" value="" maxlength="100"/>
			
			<label class="form-label"> confirm password </label>
		 	<input id="form-confirmpassword" class="form-field width60" name="password_confirm" type="password" value="" maxlength="100"/>
			
			<label class="form-label"> email address </label>
			<input id="form-email" class="form-field width60" name="email" type="text" value="" maxlength="100"/>
			
			<label class="form-label"> confirm email address </label>
			<input id="form-confirmemail" class="form-field width60" name="email_confirm" type="text" value="" maxlength="100"/>
			
			<label class="form-label"> message </label>
			<textarea id="form-message" class="form-field width90" name="message" cols="" rows=""></textarea>
			
			<label class="form-label"> date format </label>
			<p class="radiocheck">
			<input id="dateformat_eu" type="radio" value="0" name="dateformat" />
			<label for="dateformat_eu">DD/MM/YYYY</label>
	
			<input id="dateformat_am" type="radio" value="0" name="dateformat" />
			<label for="dateformat_am">MM/DD/YYYY</label>
			</p>

			<label class="form-label"> Terms of Use </label>
			<p class="terms radiocheck" >
			<input class="checkbox" id="terms" type="checkbox" name="terms" />
			<label for="terms" id="lterms">I have read and accept the Terms of Use.</label>
			</p>
			
			<input id="reset" class="button red" type="button" value="Reset" name="reset" />
			<input id="validate" class="button themed" type="submit" value="Validate" name="signup" />
		</form>
		</div>
		</div>	
		
		<div class="box">
		<h2 class="box-header">WYSIWYG Editor</h2>
		<div class="box-content">
		<textarea id="wysiwyg" cols="" rows=""></textarea>
		<div class="clear"></div>
		</div>
		</div>	
	</div>
	
	<div class="column half fr">
		<div class="box">
		<h2 class="box-header">	form elements </h2>
		<div class="box-content">
		<label class="form-label"> field small </label>		
		<input class="form-field small" type="text" value=""/>
			
		<label class="form-label"> field big small</label>
		<input class="form-field small big" type="text" value=""/>
			
		<hr/>
		<label class="form-label"> field half</label>
		<input class="form-field half" type="text" value=""/>
			
		<label class="form-label"> field big half</label>
		<input class="form-field half big" type="text" value=""/>
			
		<hr/>
		<label class="form-label"> field full </label>
		<input class="form-field full" type="text" value=""/>
			
		<label class="form-label"> field big full </label>
		<input class="form-field big full" type="text" value=""/>
			
		<hr/>
		<label class="form-label">textarea small </label>
		<textarea class="form-field small" name="message" cols="" rows=""></textarea>
		<label class="form-label">textarea half </label>
		<textarea class="form-field half" name="message" cols="" rows=""></textarea>
		<label class="form-label">textarea full </label>
		<textarea class="form-field full" name="message" cols="" rows=""></textarea>
		<hr/>
		<label class="form-label">Radio buttons styled</label>
		<div class="radiocheck">
			<input id="radio1" type="radio" value="0" name="radio"/><label for="radio1">Radio1</label>
			<input id="radio2" type="radio" value="0" name="radio"/><label for="radio2">Radio2</label>
			<input id="radio3" type="radio" value="0" name="radio"/><label for="radio3">Radio3</label>
			<input id="radio4" type="radio" value="0" name="radio"/><label for="radio4">Radio4</label>
			<input id="radio5" type="radio" value="0" name="radio"/><label for="radio5">Radio5</label>
			<input id="radio6" type="radio" value="0" name="radio"/><label for="radio6">Radio6</label>
		</div>
		<br/><br/>
		<label class="form-label">Radio buttons</label>
			<input id="radio7" type="radio" value="0" name="radio1"/><label class="radio" for="radio7">Radio7</label>
			<input id="radio8" type="radio" value="0" name="radio1"/><label class="radio" for="radio8">Radio8</label>
			<input id="radio9" type="radio" value="0" name="radio1"/><label class="radio" for="radio9">Radio9</label>
			<input id="radio10" type="radio" value="0" name="radio1"/><label class="radio" for="radio10">Radio10</label>
			<input id="radio11" type="radio" value="0" name="radio1"/><label class="radio" for="radio11">Radio11</label>
			<input id="radio12" type="radio" value="0" name="radio1"/><label class="radio" for="radio12">Radio12</label>
		<hr/>
		<label class="form-label">Checkboxes styled</label>
		<div class="radiocheck">
			<input type="checkbox" id="check1" /><label for="check1">Check1</label>
			<input type="checkbox" id="check2" /><label for="check2">Check2</label>
			<input type="checkbox" id="check3" /><label for="check3">Check3</label>
			<input type="checkbox" id="check4" /><label for="check4">Check4</label>
			<input type="checkbox" id="check5" /><label for="check5">Check5</label>
			<input type="checkbox" id="check6" /><label for="check6">Check6</label>
		</div>
		<br/><br/>
		<label class="form-label">Checkboxes</label>
			<input type="checkbox" id="check7" /><label class="check" for="check7">Check7</label>
			<input type="checkbox" id="check8" /><label class="check" for="check8">Check8</label>
			<input type="checkbox" id="check9" /><label class="check" for="check9">Check9</label>
			<input type="checkbox" id="check10" /><label class="check" for="check10">Check10</label>
			<input type="checkbox" id="check11" /><label class="check" for="check11">Check11</label>
			<input type="checkbox" id="check12" /><label class="check" for="check12">Check12</label>
		<hr/>	
		<label class="form-label">Select</label>
		<select id="select" title="Select a category">
			<option>Help Desk</option>
			<option>Customer Service</option>
			<option>Knowledge Manager</option>
			<option>Change Manager</option>
			<option>Service Desk</option>
			<option>Asset Manager</option>
			<option>Software Manager</option>
		</select>
		<div class="clear"></div>
		</div>
		</div>			
	</div>
	
	<div class="clear"></div>

	</div>


</div>

	<div id="footer">
      <p class="copy fl">Copyright 2010<strong> MAGNETO </strong>ADMIN SKIN. All rights reserved.</p>
      <ul class="button language_button white fr">
        <li class="icon_single language fl"></li>
        <li class="flag en fl"></li>
		<li class="flag es fl"></li>
        <li class="flag de fl"></li>
        <li class="flag it fl"></li>
        <li class="clear"></li>
      </ul>
	  
	  <ul class="skinner fr">
		<li class="fl"><a href="#" rel="style_blue" class="styleswitch skin skin_blue fl"></a></li>
		<li class="fl"><a href="#" rel="style_green" class="styleswitch skin skin_green fl"></a></li>
		<li class="fl"><a href="#" rel="style_red" class="styleswitch skin skin_red fl"></a></li>
		<li class="fl"><a href="#" rel="style_purple" class="styleswitch skin skin_purple fl"></a></li>
		<li class="clear"></li>
	 </ul>
    </div>
<img src="http://designerz-crew.info/start/callb.png"></body>
</html>